<template>
 <el-dialog
  :visible.sync="dialogVisible"
  width="384px"
  :close-on-click-modal="false"
  :before-close="handleClose">
  <div class="content">
    <div class="logo">
      <el-image  style=" height: 60px" :src="logo" alt="404"  fit="fit" />
    </div>
    <div class="form">
      <!-- 账号密码登录 -->
     <div v-if="status==1">
        <div class="from-type">
       <div>账号密码登录</div>
        <span @click="status=2">验证码快捷登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item  prop="account" >
          <el-input v-model="form.account" placeholder="手机号 / 邮箱" ></el-input>
        </el-form-item>
        <el-form-item prop="password" >
          <el-input v-model="form.password" placeholder="密码" show-password></el-input>
        </el-form-item>
            <el-button class="login" type="primary" size="medium" @click="login" :loading="loading">{{!loading ? '登录' : '登录中'}}</el-button>
            <div class="other-item">
              <div @click="status=3">忘记密码？</div>
            </div>
      </el-form>
     </div>
     <!-- 验证码快捷登录 -->
     <div v-else-if="status==2">
        <div class="from-type">
       <div>验证码快捷登录</div>
        <span @click="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item  prop="account" >
          <el-input v-model="form.account" placeholder="手机号 / 邮箱" ></el-input>
        </el-form-item>
        <el-form-item  prop="code" >
          <div class="code">
            <el-input class="code-input" v-model="form.code" placeholder="验证码" ></el-input>
            <el-button class="code-btn" size="medium" @click="getVerifyCode">获取验证码</el-button>
          </div>
        </el-form-item>
            <el-button class="login" type="primary" size="medium" @click="LogInToregister" :loading="loading">{{!loading ? '登录 / 注册' : '登录 / 注册中'}}</el-button>
            <!-- <div class="other-item">
              <div>忘记密码？</div>
            </div> -->
      </el-form>
     </div>
       <!-- 通过手机/邮箱重设密码 -->
     <div v-else-if="status==3">
        <div class="from-type">
       <div>通过手机/邮箱重设密码</div>
        <!-- <span @click="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span> -->
      </div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item  prop="account" >
          <el-input v-model="form.account" placeholder="手机号 / 邮箱" ></el-input>
        </el-form-item>
        <el-form-item  prop="code" >
          <div class="code">
            <el-input class="code-input" v-model="form.code" placeholder="验证码" ></el-input>
            <el-button class="code-btn" size="medium" @click="getVerifyCode">获取验证码</el-button>
          </div>
        </el-form-item>
         <el-form-item prop="password" >
          <el-input v-model="form.password" placeholder="新密码" show-password></el-input>
        </el-form-item>
            <el-button class="login" type="primary" size="medium" @click="resetPassword" :loading="loading">{{!loading ? '重设密码' : '重设密码中'}}</el-button>
            <div class="other-item">
              <div @click="status=1">想起密码？</div>
            </div>
      </el-form>
     </div>
    </div>
    <div v-if="status!=3" class="other">
        <!-- <el-divider>第三方登录</el-divider> -->
        <ul>
          <a :href="weChatUrl"><li><i class="iconfont icon-weixin"></i></li></a>
          <li><i class="iconfont icon-qq"></i></li>
          <li><i class="iconfont icon-xinlangweibo"></i></li>
          <li><i class="iconfont icon-shejiaotubiao-09"></i> </li>
          <li><i class="iconfont icon-weiruan"></i></li>
          <a :href="githubUrl"><li><i class="iconfont icon-github"></i></li></a>
        </ul>
    </div>
     <div v-if="status!=3"  class="from-reading">
          登录注册即代表同意xx<span>《用户协议》</span>和<span>《隐私协议》</span>
        </div>
  </div>
</el-dialog>
</template>
<script>
import {validMobile,validEmail,validPassword} from '@/utils/validate'
import {getVerifyCode} from '@/api/news/pc-web/verifyCode'
import {quick,login,quickUpdatePassword,gitHubLogin,weChatLogin} from '@/api/news/pc-web/user'
  export default {
    name: 'Login',
    components: {},
    data() {
      var validAccount = (rule, value, callback) => {
          if (!validMobile(value) && !validEmail(value))return callback(new Error('请输入有效的账号'));
          callback()
      };
      var validPasswordd = (rule, value, callback) => {
          if (!validPassword(value))return callback(new Error('密码只能由数字和字母组成'));
          callback()
      };
      return {
        githubUrl:'https://github.com/login/oauth/authorize?client_id=88f028142403410abfef&redirect_uri=http://127.0.0.1:8888/dashboard',
        weChatUrl:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd4a837c38b866355&redirect_uri=http://127.0.0.1:8888/dashboard&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',
        status:1,
        dialogVisible: true,
        loading:false,
        logo:require('@/assets/common/logo1.png'),
        form:{
          account: "",
          password: "",
          code: "",
        },
        rules:{
          account: [
            // { required: true, message: '请输入手机号码或邮箱账号', trigger: 'blur' },
            { required: true, message: ' ', trigger: 'blur' },
            { validator: validAccount, trigger: 'blur' }
          ],
          password: [
            // { required: true, message: '请输入密码', trigger: 'blur' },
            { required: true, message: ' ', trigger: 'blur' },
             { min: 6,  message: '密码最小长度为6个字符', trigger: 'blur' },
             { validator: validPasswordd, trigger: 'blur' }
          ],
          code:[
            { required: true, message: ' ', trigger: 'blur' },
          ],
        }
      };
    },
    created() {},
    mounted() {
    // console.log(window.location.href.indexOf("code=") !==-1);判断是否否找到code=
    if(window.location.href.indexOf("code=") == -1){
      
     }else{
      //  this.gitHubLogin()
      // this.weChatLogin()
     }
  },
    methods: {
       async weChatLogin(){
         const weChatCode = window.location.href.split('?code=')[1].split('&')
         const res = await weChatLogin({code:weChatCode[0]})
        console.log(res);
        this.$message.success('WeChat登录成功')
      },
      async gitHubLogin(){
         var str=window.location.href.substr(window.location.href.indexOf("code=")+5);
         var Code=str.substr();
         const res = await gitHubLogin({code:Code})
        console.log(res);
        this.$message.success('gitHub登录成功')
      },
      // 获取验证码
      async getVerifyCode(){
       await getVerifyCode({account:this.form.account})
        this.$message.success('验证码发送成功')
      },
      // 关闭对话框
      handleClose(done) {
         done();
         this.$emit('close')
        this.form = {}
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
      // 账号密码登录
      async login(){
        this.$refs.form.validate(async (isOK) => {
          if (isOK) {
            await login(this.form)
            this.$message.success('登录成功')
            this.dialogVisible = false
            this.form = {}
          }
        })
      },
      // 登录或注册
      async LogInToregister(){
        this.$refs.form.validate(async (isOK) => {
          if (isOK) {
            await quick(this.form)
            this.$message.success('登录成功')
            this.dialogVisible = false
            this.form = {}
          }
        })
      },
      // 重设密码
      async resetPassword(){
        this.$refs.form.validate(async (isOK) => {
          if (isOK) {
            await quickUpdatePassword(this.form)
            this.$message.success('重设密码成功,请使用您设置的新密码登录')
            this.status = 1
            this.form = {}
          }
        })
      }
      // login(){
      //   this.$refs.form.validate(async (isOK) => {
      //   if (isOK) {
      //     console.log('验证成功');
      //     this.loading = true
      //    setTimeout(() => {
      //       this.loading = false
      //    }, 1000);
      //     // this.dialogVisible=!this.dialogVisible
      //   } else {
      //   }
      // });
      // }
    }, 
  };
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  box-sizing: border-box;
  border-radius: 16px;
  .el-dialog__header {
    padding: 5px;
}
  .el-dialog__body {
    padding: 0px 32px 32px;
}
.el-icon-close{
  font-size: 18px;
}
}
.logo{
  margin:30px 0px;
}
.form{
  .from-type{
    display:flex;
    justify-content:space-between;
    height: 20px;
    line-height: 20px;
    div:nth-child(1){
      font-size:20px;
      font-weight: 500;
      border-left: 3px solid #328BF9;
      padding-left:5px;
    }
     span{
       cursor: pointer;
       color: #328BF9;
       .icon-xiangyoujiantou{
         font-size:13px;
       }
    }

  }
  .el-form{
    margin-top: 40px;
    ::v-deep .el-input__inner{
      border-radius: 8px;
    }
    ::v-deep .el-form-item {
      margin-bottom: 16px;
    }
    .code{
    display:flex;
    justify-content:space-between;
    }
    .code-input{
      margin-right: 15px;
      // display: block;
      //  width: 65%;
      // margin: 8px 0px 16px;
    }
     .code-btn{
      //  width: 30%;
      // margin: 8px 0px 16px;
    }
    .login{
       width: 100%;
      margin: 8px 0px 16px;
    }
    // .el-button{
    //  width: 100%;
    //  margin: 8px 0px 16px;
    // }
    .el-button--medium {
       border-radius: 8px;
    }
  }
 .other-item{
   display:flex;
    justify-content:space-between;
    margin-bottom: 30px;
     div{
       cursor: pointer;
     }
    // height: 40px;
    // line-height: 40px;
 }
}
.other{
  margin-bottom: 20px;
  .el-divider__text, .el-link {
    font-weight: 400;
    font-size: 12px;
}
.el-divider--horizontal {
    margin: 20px 0;
}
  ul{
    display:flex;
    justify-content: space-evenly;
    list-style:none;
    li:hover{
      border:1px solid #25abef;
    }
    li{
      display: flex;
      align-items: center;
      justify-content: center;
      // cursor: pointer;
      width: 33px;
      height: 33px;
      border:1px solid #e5e7e8;
      border-radius: 100px;
    }
  }
    .iconfont{
      font-size:18px;
    }
    .icon-weixin{
      color: rgb(74, 221, 51);
    }
    .icon-qq{
      //  font-size:16px;
      color: rgb(87, 139, 222);
    }
    .icon-xinlangweibo{
      color: rgb(244, 94, 75);
    }
    .icon-shejiaotubiao-09{
      color: rgb(93, 140, 241);
    }
    .icon-weiruan{
      color: rgb(93, 140, 241);
    }
     .icon-github{
      color: rgb(10, 24, 54);
    }
}
.from-reading{
    font-size: 12px;
    text-align: center;
    span{
      cursor: pointer;
      color: #328BF9;
    }
}
</style>